import { Modal, Button } from "antd";
import { useState } from "react";
import "./index.css";
import Canshu from "./components/canshu";
import Peizhi from "./components/peizhi";
import Xuanxiang from "./components/xuanxiang";
function Popup(props: any) {
  const { title, show, ok, cancel } = props;
  const [radioLs, setRadioLs] = useState([
    { id: 1, title: "参数", component: Canshu },
    { id: 2, title: "配置", component: Peizhi },
    { id: 3, title: "选项", component: Xuanxiang },
  ]);
  const [radioid, setRadioid] = useState(1);
  function changeRadioAc(id: number) {
    setRadioid(id);
  }
  return (
    <>
      <Modal
        title={title}
        open={show}
        centered
        width={1000}
        keyboard={true}
        wrapClassName={"web"}
        onCancel={cancel}
        footer={
          <>
            <Button type="link" onClick={cancel}>
              取消
            </Button>
            <Button onClick={() => ok({ id: 1 })} type="primary">
              <label style={{ color: "#fff" }}>确定</label>
            </Button>
          </>
        }
      >
        <div className="modal-main">
          <div className="modal-radio">
            {radioLs.map((item) => {
              return (
                <div
                  onClick={() => changeRadioAc(item.id)}
                  className={radioid === item.id ? "radioActive" : ""}
                  key={item.id}
                >
                  {item.title}
                </div>
              );
            })}
          </div>

          <div className="modal-module">
            {radioLs.map((item: any) => {
              if (item.id === radioid) {
                return <item.component key={item.id}></item.component>;
              }
            })}
          </div>
        </div>
      </Modal>
    </>
  );
}

export default Popup;
